<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        div {
            width: 1000px;
            margin: auto;
            height: 10000px;
            background: #ddd;
        }

        span{
            display: none;
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: #333;
            color: #ddd;
            position: fixed;
            top: 200px;
            right: 0;
        }

        span:hover{
            cursor: pointer;
            opacity: .6;
            color: #fff;
        }
    </style>
</head>
<body>
<div></div>
<span id="top">TOP</span>
<script>
    const toTop = document.getElementById("top");
    const rightPX = (document.body.clientWidth - 1000)/2 - 50 + 'px';
    toTop.style.right = rightPX;
    //监听window的resize事件
    window.addEventListener('resize', () => {
        toTop.style.right = rightPX;
    });
    //监听window的scroll事件
    //判断 滚动条 距离上方超出固定的高度时，span显示
    //window['pageYOffset']
    window.addEventListener('scroll',() => {
        let height = window['pageYOffset'];
        if(height > 1000){
            toTop.style.display = 'inline-block';
        }else {
            toTop.style.display = 'none';
        }
    });
    //监听 span 的click事件
    //滚动条回到起始位置
    toTop.addEventListener('click',() => {
        window.scroll(0,0);
    });
</script>
</body>
</html>